<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<!-- Mobile Devices Support @begin -->
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- apple devices fullscreen -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- Mobile Devices Support @end -->
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    canvas{
		display:block; margin:30px auto;
        font-size: 36px;
        transform:rotate(-30deg);
    }
  </style>
</head>
<body style="background:#fe9037;">
<script type="text/javascript"> 
    var mW = $(window).width()*0.7;
    var mH = $(window).width()*0.7;
    var mData = [
				[' 风险筛查', 72],
				[' 多头借贷', 46],
				['逾期公债 ', 50],
				['信息匹配 ', 80],
				[' 个人资质', 77],
				['法力', 77]
				]
    var mCount = mData.length; //边数 
    var mCenter = mW /2; //中心点
    var mRadius = mCenter - $(window).width()*0.15; //半径(减去的值用于给绘制的文本留空间)
    var mAngle = Math.PI * 2 / mCount; //角度
    var mCtx = null;
    var mColorPolygon = '#FFF'; //多边形颜色
    var mColorLines = '#FFF'; //顶点连线颜色
    var mColorText = '#FFF';

    //初始化
    (function(){
      var canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      canvas.height = mH;
      canvas.width = mW;
      mCtx = canvas.getContext('2d');

      drawPolygon(mCtx);
      drawLines(mCtx);
      drawText(mCtx);
      drawRegion(mCtx);
      //drawCircle(mCtx);
      drawrotate(mCtx);
    })();

		//旋转 
		function drawrotate(ctx){
			ctx.rotate(180*Math.PI/180);
			
		}





      // 绘制多边形边
      function drawPolygon(ctx){
        ctx.save();

        ctx.strokeStyle = mColorPolygon;
        var r = mRadius/ mCount; //单位半径
        //画6个圈
        for(var i = 0; i < mCount; i ++){
            ctx.beginPath();        
            var currR = r * ( i + 1); //当前半径
            
            //画6条边
            for(var j = 0; j < mCount; j ++){
            		//var currR1 =  2*Math.PI/5 * j;
                var x = mCenter + currR * Math.cos(mAngle * j);
                var y = mCenter + currR * Math.sin(mAngle * j);

                ctx.lineTo(x, y);
            }
            ctx.closePath()
            ctx.stroke();
        }

        ctx.restore();
      }

    //顶点连线
    function drawLines(ctx){
        ctx.save();

        ctx.beginPath();
        ctx.strokeStyle = mColorLines;

        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i);
            var y = mCenter + mRadius * Math.sin(mAngle * i);

            ctx.moveTo(mCenter, mCenter);
            ctx.lineTo(x, y);
        }

        ctx.stroke();

        ctx.restore();
    }

    //绘制文本
    function drawText(ctx){
        ctx.save();

        //var fontSize = mCenter / 12;
        var fontSize = 13;
        ctx.font = fontSize + 'px Microsoft Yahei';
        ctx.fillStyle = mColorText;

        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i);
            var y = mCenter + mRadius * Math.sin(mAngle * i);

            if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
                ctx.fillText(mData[i][0], x, y + fontSize); 
            }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);    
            }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);   
            }else{
                ctx.fillText(mData[i][0], x, y);
            }

        }

        ctx.restore();
    }

    //绘制数据区域
    function drawRegion(ctx){
        ctx.save();

        ctx.beginPath();
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.fillStyle = 'rgba(254, 215, 50, 0.5)';
        ctx.fill();

        ctx.restore();
    }

    //画点
    function drawCircle(ctx){
        ctx.save();

        var r = mCenter / 40;
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.beginPath();            
            ctx.arc(x, y, r, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(254, 215, 50, 0.8)';
            ctx.fill();
        }       

        ctx.restore();
    }
</script>

</body>
</html>